<template>
  <div >
    <base-header  text="选择品牌"></base-header>
    
      <div style="background: rgba(0, 0, 0,0.2);">
        <div class="main-body" style="overflow: auto;" :style="{height: height + 'px'}">
          <transition-group name="item-list" tag="div">
            <div class="item-list-item" @click="chooseBrand(item.bid)" v-for="(item) in list" :key="item.bid">
              <div class="div1">{{item.name}}</div>
            </div>
          </transition-group>
        </div>
        <div class="letter" :style="{top: top + 'px'}">
          <div style="margin-top: 2px;" v-for="item in letterList" :key="item" @click="search(item)">{{item}}</div>
        </div>
      </div>
      </div>
    
</template>
<script>
  import BaseHeader from "../components/BaseHeader.vue";
  import makePy from "../components/searchLetter";

  export default {
    components: {BaseHeader},
    data() {
      return {
        height: window.innerHeight - (265*(window.innerWidth/1080)),
        top: (window.innerHeight - 416) / 2,
        
        list: [
        //  {
        //    name: '海信Hisense',
        //    bid: 1,
        //    common: 1
        //  },
        //  {
        //    name: '大金',
        //    bid: 2,
        //    common: 1
        //  },
        //  {
        //    name: '格力',
        //    bid: 3,
        //    common: 1
        //  },
        ],
        listCopy:[],
        letterList: ['#','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']
      }
    },
    computed: {
      platformInfo: function() {
        return {
          isAndroid: navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Linux') > -1,
          isiOS : !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
        }
      }
    },
    created(){
      window.brandList = this.brandList
    },
    mounted(){
      let tid = this.$route.query.tid;
     
      if(this.platformInfo.isAndroid){
        window.android.getBrandList(tid)
      }else {
        window.webkit.messageHandlers.getBrandList.postMessage(tid)
      }
    },
    methods:{
      randomIndex: function () {
        return Math.floor(Math.random() * this.list.length)
      },
      brandList(v){
        this.list = v.brandList;
        let arr = [];
        for(let i = 0;i < this.list.length;i ++){
          arr.push(this.list[i])
        }
        this.listCopy = arr;
        //筛选
        let arr1 = [];
        for(let i = 0;i < this.list.length;i++){
          if((this.list[i].name =="大金")||(this.list[i].name =="格力")||(this.list[i].name =="美的")){
            arr1.push(this.list[i])
          }
        }
        this.list = arr1.concat();
      },
      chooseBrand(v){
        let str = this.$route.query.tid + ',' + v;
        this.$router.push({name: 'AddTelecontroller',query:{id: str}})
      },
      search(v){
        if(v === '#'){
          let arr = [];
          for(let i = 0;i < this.listCopy.length;i ++){
            arr.push(this.listCopy[i])
          }
          this.list = arr
        }else{
          let Arr = [];
          for(let a = 0;a < this.listCopy.length;a ++){
            let pyArr = makePy(this.listCopy[a].name);
            for(let b = 0;b < pyArr.length;b ++){
              if(pyArr[b].substr(0,1) === v){
                Arr.push(this.listCopy[a]);
                break;
              }
            }
          }
          this.list = Arr
        }
      }
    }
  }
</script>
<style scoped>
  .main-body{
    padding: 0 50px 15px 25px;
  }
  .item-list-item{
    display: block;
    font-size: 0.38rem;
    padding-left: 0.2rem;
    color: #fff;
    width: 100%;
    height: 1.35rem;
    background: url('../assets/borderBottom.png')no-repeat  0 1.32rem;
    background-size: 100% 1px;
  }
  .item-list-item .div1{
    line-height: 1.8rem;
    height: 100%;
  }
  .letter{
    position: fixed;
    right: 15px;
    width: 13px;
    font-size: 12px;
    color: #ffffff;
    text-align: center;
  }
  .item-list-enter, .item-list-leave-to
  {
    transform: translateX(50px);
    opacity: 0;
  }
  .item-list-leave, .item-list-enter-to
  {
    opacity: 1;
  }
  .item-list-leave-active{
    position: absolute;
  }
</style>
